import React, { useState, useEffect } from "react";
import { Table, message, Button, Tooltip, Modal, notification } from "antd";
import { useNavigate } from "react-router";
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  ArrowUpOutlined,
} from "@ant-design/icons";
import axios from "axios";

// 草稿箱中只展示 编辑状态的新闻auditState===0
export default function NewsDraft() {
  const [draftList, setDraftList] = useState([]);
  const { username } = JSON.parse(localStorage.getItem("token"));
  const navigate = useNavigate();
  const { confirm } = Modal;
  useEffect(() => {
    axios
      .get(
        `http://localhost:5000/news?author=${username}&auditState=0&_expand=category`
      )
      .then((res) => {
        setDraftList(res.data);
      })
      .catch(() => {
        message.warning("获取草案列表失败！");
      });
  }, [username]);
  // 删除
  const showConfirm = (item) => {
    confirm({
      title: "确认删除该新闻草稿吗？",
      icon: <ExclamationCircleOutlined />,
      async onOk() {
        try {
          setDraftList(draftList.filter((data) => data.id !== item.id));
          await axios.delete(`http://localhost:5000/news/${item.id}`);
          message.success("删除成功");
        } catch (error) {
          message.error("删除失败");
        }
      },
      onCancel() {
        message.warning("取消删除");
      },
    });
  };
  // 发布
  const sendNews = (id) => {
    axios
      .patch(`http://localhost:5000/news/${id}`, {
        auditState: 1,
      })
      .then(() => {
        navigate("/audit-manage/audit");
        // 成功后的消息通知
        notification.open({
          message: "Notification Title",
          description: "您可以到【审核管理/审核新闻】中查看该新闻",
          duration: 5,
          placement: "bottomRight",
        });
      })
      .catch(() => {
        message.error("发布失败");
      });
  };
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render: (id) => {
        return <b>{id}</b>;
      },
    },
    {
      title: "新闻标题",
      dataIndex: "title",
      render: (title, item) => {
        return (
          <a href={`http://localhost:3000/#/news-manage/preview/${item.id}`}>
            {title}
          </a>
        );
      },
    },
    {
      title: "分类",
      dataIndex: "category",
      render: (category) => {
        return category.title;
      },
    },
    {
      title: "作者",
      dataIndex: "author",
    },
    {
      title: "操作",
      render: (item) => {
        return (
          <div>
            <Tooltip title="删除">
              <Button
                type="danger"
                shape="circle"
                icon={<DeleteOutlined />}
                onClick={() => showConfirm(item)}
              />
            </Tooltip>
            &nbsp;
            <Tooltip title="编辑">
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                onClick={() => {
                  navigate(`/news-manage/update/${item.id}`);
                }}
              />
            </Tooltip>
            &nbsp;
            <Tooltip title="提交审核">
              <Button
                type="primary"
                shape="circle"
                icon={<ArrowUpOutlined />}
                onClick={() => sendNews(item.id)}
              />
            </Tooltip>
          </div>
        );
      },
    },
  ];

  return (
    <Table
      dataSource={draftList}
      columns={columns}
      rowKey={(item) => item.id}
      pagination={{ pageSize: 5 }}
    />
  );
}
